<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="../../css/fullcalendar.css" />
    <link rel="stylesheet" href="../../css/unicorn.main.css" />
    <link rel="stylesheet" href="../../css/unicorn.grey.css" class="skin-color" />
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/bootstrap.min.js"></script>
    <script src="../lib/angualrjs.min.js"></script>
</head>
<body bgcolor="buttonface">
<div id="header">
    <h1><a href="class.html">Area</a></h1>
</div>

<div id="sidebar">
    <ul id="uu">
        <li><a href="../../index.html">><i class="icon icon-th-list"></i> <span>TypeScript-Learn</span></a></li>
        <li><a href="hello.html">><i class="icon icon-th-list"></i> <span>Hello TypeScript</span></a></li>
        <li><a href="area.html">><i class="icon icon-th-list"></i> <span>Area</span></a></li>
        <li><a href="interface.html">><i class="icon icon-th-list"></i> <span>Interface</span></a></li>
        <li><a href="lambda.html">><i class="icon icon-th-list"></i> <span>lambda 表达式</span></a></li>
        <li><a href="class.html">><i class="icon icon-th-list"></i> <span>Class</span></a></li>
        <li><a href="extends.html">><i class="icon icon-th-list"></i> <span>Extends</span></a></li>
    </ul>
</div>

<div id="content">
    <div> <h1>按键F12，控制台将会打印如下内容</h1></div>
    <div><img src="../../img/demo/class.png"/></div>
            <pre>
    <code class="lang-shell">
        class Shape {

        area: number;
        public color: string;


        constructor (public  name: string , public width: number, public height: number ) {
        this.area = width * height;
        this.color = "pink";
        }

        shoutout() {
        return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
        }
        }

        var square = new Shape("square", 30, 30);

        console.log( square.shoutout() );
        console.log( 'Area of Shape: ' + square.area );
        console.log( 'Name of Shape: ' + square.name );
        console.log( 'Color of Shape: ' + square.color );
        console.log( 'Width of Shape: ' + square.width );
        console.log( 'Height of Shape: ' + square.height );
    </code>
        </pre>

</div>


<script src="class.js"></script>
</body>
</html>
